<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head lang="zh-CN">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <script src="js/jquery-1.7.2.min.js"></script>
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
      <script src="js/jquery.validate.min.js"></script>
    <script src="js/messages_zh.js"></script>
<title>Insert title here</title>
</head>
<script type="text/javascript">
	$(function(){
		//取消订单
		$("#delorder").click(function(){			
		$.ajax({
				type:"post",
				url:'emptycar',
				success:function(data){
					location.href="shoppingcar";
					alert("购物车空空如也，赶紧选购吧");						
				}
			})
		});
		//下单
		$("#firmorder").click(function(){
			var fnumber = new Array(); 
			var i = 0;
			$("input[name = 'fnumber']").each(function(){
				fnumber[i] = $(this).val();
				i++;
			});
			
			$.ajax({
				type:"post",
				url:'firmorder?fnumber='+fnumber,
				
				success:function(data){
				
					alert("下单成功");
					location.href = "currentuserorder";
				},
				err:function(data){
					alert("下单失败了");
				}
			})
		});
		//清离某一项购物车信息
		$("input[name = 'deletecar']").each(function(){
			$(this).click(function(){
				var number = $(this).parent().parent().find("td").first().text();
				alert(number);
				$.ajax({
					type:"post",
					url:'deletecar',
					data:{
						"shoppingcarindex": number,
					},
					success:function(data){
						location.href="shoppingcar";
						alert("购物车空空如也，赶紧选购吧");						
					}
				})
			})
		});
	});
</script>
<body>
<div style="height: 100%;width: 100% ;">
		<!-- 导航栏 -->
		<div style="background-color:#BFBDC2" class="navbar navbar-default navbar-fixed-top" role="navigation">
			<div class="container-fluid">
		    	<div class="navbar-header">
		      	<a class="navbar-brand" href="enterusermain"><img alt="加载失败" src="img/elmlogo.png" style="width:60px;heigth:28px"/></a>  <!-- logo标题 -->
		    	</div>
		
		    	<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
			      	<ul class="nav navbar-nav navbar-right" style="margin-right: 50px">
			        	<li class="dropdown">
							<a href="#" class="dropdown-toggle" data-toggle="dropdown"><img alt="" src="img/order.png">我的订单<span class="caret"></span></a>
			        		<ul class="dropdown-menu" role="menu">
			        			<li><a href="pastuserorder">过往订单</a></li>
					            <li class="divider"></li>
					            <li><a href="currentuserorder">当前订单</a></li>
			        		</ul>
			        	</li>
			        	
			        	<li><a href="favorite"><img alt="" src="img/favorite.png" style="90%">我的收藏</a></li>
			        	<li><a href="shoppingcar"><img alt="" src="img/shoppingcar.png">我的购物车</a></li>
			        	<li><a href="updateUI">修改信息</a></li>
			        	<li><a href="index.jsp">退出登录</a></li>
			      	</ul>
		    	</div><!-- /.navbar-collapse -->
		  	</div><!-- /.container-fluid -->
	</div>
		
		<!-- 搜索窗口 -->
		<div style="float: right; margin-top: 80px; margin-right:50px; text-align: center; width:30%;">
			
		</div>
		
		<!--展现页面   jsp:forward貌似挺有用的-->
		<div class="container">
			<div  class="col-md-12" style="margin-top: 50px">
			<form action="firmorder" method = "post">
				<table class="table table-striped">
					<tr>
						<td>索引</td>
						<td>名称</td>
						<td>美图</td>
						<td>描述</td>
						<td>售价</td>
						<td></td>
					</tr>
					
				    <c:forEach items="${carfoods}" var = "food" varStatus="carf">
				    	<tr>
							<td>${carf.index+1}</td>
							<td>${food.foodname}</td>
							<td><img alt="" src="/upload${food.foodimg} " style="width: 50px;height: 50px"> </td>
							<td>${food.foodgenre}</td>
							<td>${food.foodprice}</td>
						<td>
						
								<a href="#"><img alt="" src="img/sub.png"  name = "subfood" ></a>
								<input type="text" value="1" style="width: 30px " disabled="disabled" name = "fnumber"/>
								<a href="#"><img alt="" src="img/add.png"  name = "addfood"></a>
							</td>
				    	</tr>
					</c:forEach>
				</table>
				</form>
			</div>
			<div style="position: fixed;bottom: 20px;">
				<form method="post"  >
					 <input type="button" class="btn btn-info" id="firmorder" value="下单"style="margin-left: 800px;"/>
					 <input type="button" class="btn btn-warning" id = "delorder" value="清空购物车"/>
				</form>
			</div>
		</div>
	</div>
</body>
<script type="text/javascript">
	$(function(){
		
		//减少食物订单
		$("img[name = 'subfood']").each(function(){
		
			$(this).click(function(){
				var number = $(this).parent().next().val();
				if(number > 1){
					$(this).parent().next().val(number - 1);
				}
			})
		});
		//增加食物订单
		$("img[name = 'addfood']").each(function(){
		
			$(this).click(function(){
				var number = $(this).parent().parent().find("input").val();
				//Number 进行string转换成int  ，因上number是string类型
				$(this).parent().parent().find("input").val(Number(number) + 1);
			})
		});
	});
</script>
</html>